<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/public.css">
  <link rel="stylesheet" href="../css/login.css">
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/jquery-1.10.1.min.js"></script>
</head>
<style>
  .error {
    color: red
  }

  .success {
    color: green;
  }
</style>

<body>
  <!-- 外部引入 -->
  <div class="header"></div>


  <div class="content">
    <div class="wrap">
      <div class="left">
        <div class="contentLeft">
          <h5 class="login_msg">
            <span>欢迎登录</span>
            <img class="msgImg" src="../images/fila_blue_150.png" alt="">
          </h5>
          <div class="login_taps">
            <h6>账号密码登录</h6>
            <h6>短信快捷登录/注册</h6>
          </div>
          <form action="">
            <div class="login_user">
              <input type="text" name="phone" id="phone" v-model="phone" placeholder="手机号码">
            </div>
            <div class="login_pwd">
              <input type="text" name="pwd" id="pwd" v-model="pwd" placeholder="登录密码">
            </div>
            <!-- <div class="getCode">
              <input type="text" name="code" id="codeInp" placeholder="请输入验证码">
              <span id="createCode">a1b2</span>
              <span id="code_span"></span>
            </div> -->
            <div class="dis-box">
              <p><span :class="phoneClass">{{phonetip}}</span></p>
              <p><span :class="pwdClass">{{pwdtip}}</span></p>
            </div>
            <div class="btns_bg" @click="loginBtn">立即登录</div>
          </form>
          <p class="go-login"><a href="">忘记密码?</a></p>
        </div>
      </div>
      <div class="right">
        <div class="contentRight">
          <div class="toreg-inner">
            <h2>加入FILA V.I.P.</h2>
            <p>注册成为会员并完善个人信息，即可享受 ：</p>
            <ul>
              <li><a href="">积分可在官网购物时作为现金抵扣；</a></li>
              <li><a href="">官网、门店消费共享会员权益和积分累计</a></li>
              <li><a href="">即时收到优惠及新品发布信息，品牌活动邀约</a></li>
            </ul>
            <div class="btn-toreg">立即注册</div>
          </div>


        </div>
      </div>
    </div>


  </div>

  <!-- 外部引入 -->
  <div class="footer"></div>

</body>
<script>
  $(".header").load("header.html");
  $(".footer").load("footer.html");
  new Vue({
    el: ".content",
    data: {
      phone: "",
      phoneReg: /^1[3-9]\d{9}$/,
      phonetip: "",
      phoneClass: "error",

      pwd: "",
      pwdtip: "",
      pwdReg: /^[\w$]{6,12}$/,
      pwdClass: "error",
    },
    watch: {
      phone(str) {
        if (this.phoneReg.test(str)) {
          this.phonetip = "手机号正确";
          this.phoneClass = "success";
        } else {
          this.phonetip = "* 手机号码格式不正确";
          this.phoneClass = "error";
        }
      },
      pwd(str) {
        if (this.pwdReg.test(str)) {
          // this.pwdtip = "密码格式正确";
          // this.pwdClass = "success";

          var isExistNum = false;
          var isExistSmall = false;
          var isExistBig = false;
          var isExistSpe = false;

          if (/[0-9]/.test(str)) isExistNum = true;
          if (/[a-z]/.test(str)) isExistSmall = true;
          if (/[A-Z]/.test(str)) isExistBig = true;
          if (/[_$]/.test(str)) isExistSpe = true;

          var sum = isExistNum + isExistSmall + isExistBig + isExistSpe;

          switch (sum) {
            case 1:
              this.pwdtip = "密码强度:弱";
              this.pwdClass = "success";
              break;
            case 2:
              this.pwdtip = "密码强度:中";
              this.pwdClass = "success";
              break;
            case 3:
              this.pwdtip = "密码强度:强";
              this.pwdClass = "success";
              break;
            case 4:
              this.pwdtip = "密码强度:超强";
              this.pwdClass = "success";
              break;
          }
        } else {
          this.pwdtip = "* 密码由数字,大小写字母,下划线,$组成,6-12位";
          this.pwdClass = "error";
        }
      },
    },
    methods: {
      async loginBtn() {

        let { data: list } = await axios({
          method: "get",
          url: "http://localhost:2345/reginfos",
          params: {
            user: this.user,
            pwd: this.pwd,
          }
        })

        if (list.length) {
          alert("666");
          let info = list[0];
          window.localStorage.setItem("userinfo", JSON.stringify(info));
          let backurl = window.localStorage.getItem("backurl");
          if (backurl) {
            window.location.href = backurl;
          } else {
            window.location.href = "../html/goods.html";
          }
          window.location.href = "../html/goods.html";
        } else {
          alert("手机号和密码不匹配")
        }

      }
    }
  })
</script>

</html>